import { Carousel } from 'antd';
import React from 'react';

import ConstructLayout from '@/new-components/layout/Construct';
import { useTranslation } from 'react-i18next';
import Image from 'next/image';
import { Button, } from 'antd';
import { onRouterChange } from '@/utils';
import './index.css';
const contentStyle: React.CSSProperties = {
  height: '640px',
  width: '70%',
  marginTop:'5%',
  textAlign: 'center'
};
function carousel() {
  const { t } = useTranslation();
  return (
    <ConstructLayout>
      <div className='w-full h-full flex flex-col bg-carousel-bg bg-cover bg-repeat'>
        {/* <div className='flex justify-between py-4 title px-4 mt-7'>
          <div></div>
          <div className='title text-center'>
            Noah.Graph无幻觉的为您提供每一次决策，都离不开Noah Graph全域知只引擎，在这里对您的数据资产<br />
            进行探索、发现、管理。
          </div>
          <Button
            className='border-none text-white bg-button-gradient flex items-center'
            onClick={() => onRouterChange()}
          >
            进入Noah.Graph
          </Button>
        </div> */}
        <Carousel autoplay autoplaySpeed={5000} className='w-full flex justify-center mt-6'>
          <div className='flex justify-center cursor-pointer flex-col items-center'>
            <Image
              onClick={() => onRouterChange('/find-index')} style={contentStyle} src='/ai/carousel/img1.png' alt='DB-GPT' width={1600} height={600} />
            {/* <div className='mt-5 text-1xl'>
              Noah.Graph提供一个全面的数据探索引擎。通过无缝集成数据和语义层，将语义与数据知识图谱可视化，帮助您在海量数据中抽丝剥茧、灵活探索。
            </div> */}

          </div>
          <div className='flex justify-center cursor-pointer flex-col items-center'>
            <Image
              onClick={() => onRouterChange('/find-index')} style={contentStyle} src='/ai/carousel/img2.png' alt='DB-GPT' width={1600} height={600} />
          </div>
          <div className='flex justify-center cursor-pointer flex-col items-center'>
            <Image
              onClick={() => onRouterChange('/vocabulary/vocabulary-index')} style={contentStyle} src='/ai/carousel/img3.png' alt='DB-GPT' width={1600} height={600} />
          </div>
          <div className='flex justify-center cursor-pointer flex-col items-center'>
            <Image
              onClick={() => onRouterChange('/dict/dict-index')} style={contentStyle} src='/ai/carousel/img4.png' alt='DB-GPT' width={1600} height={600} />
          </div>
          <div className='flex justify-center cursor-pointer flex-col items-center'>
            <Image
              onClick={() => onRouterChange('/knowledge-graph/dataGraph-index')} style={contentStyle} src='/ai/carousel/img5.png' alt='DB-GPT' width={1600} height={600} />
          </div>
        </Carousel>
      </div>
    </ConstructLayout>
  );
}

export default carousel;
